<template>
  <div class="ftpSetting">
    <el-card>
      <el-col>
        平台接口名称
        <el-select class="searchItemWidth" v-model="name" placeholder="请选择平台接口名称" clearable filterable size="small">

        </el-select>
      </el-col>
      <el-col  style="margin-top:10px; margin-bottom:10px;">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addNewPlatform">新增接口平台</el-button>
        <el-button type="danger" size="small">删除</el-button>
        <el-button @click="reset" size="small" style="float:right;">重置</el-button>
        <el-button type="primary" @click="getDataSource" icon="el-icon-search" size="small"style="float:right;">查询</el-button>
      </el-col>
    </el-card>
    <el-table ref="tableData" :data="tableData" key="saleOrder" stripe class="marginTop10" border size="small" v-loading="loading">
      <el-table-column
        type="selection"
        width="50">
      </el-table-column>
      <el-table-column
        type="index"
        width="50" label="序号">
      </el-table-column>
      <el-table-column property="uploadTime" label="数据源名称" show-overflow-tooltip></el-table-column>
      <el-table-column property="inspectTaskCode" label="IP" show-overflow-tooltip></el-table-column>
      <el-table-column property="oriFileName" label="端口" show-overflow-tooltip></el-table-column>
      <el-table-column property="remark" label="用户名" show-overflow-tooltip></el-table-column>
      <el-table-column property="picNum" label="文件路径" show-overflow-tooltip></el-table-column>
    </el-table>
    <el-row class='pagination'>
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-row>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="cancelSubmit">
      <el-form :model="newForm" ref="newStation" :rules="rules" label-width="85px" style="padding-left:50px;">
        <el-form-item label="平台名称:" prop="platformName">
          <el-input v-model="newForm.platformName" size="small" placeholder="请输入接口平台名称" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="IP地址:"  prop="ip">
          <el-input v-model="newForm.ip" size="small" placeholder="请输入IP地址" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="登录账户:" prop="admin">
          <!-- <el-select v-model="newForm.stationCode" placeholder="请选择场站类型" style="width:250px;">
            <el-option label="光伏" value="1"></el-option>
            <el-option label="核能" value="2"></el-option>
          </el-select> -->
          <el-input v-model="newForm.admin" size="small" placeholder="请输入登录账户" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="登录密码:" prop="adminPass">
          <el-input v-model="newForm.adminPass" size="small" placeholder="请输入登录密码" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="文件路径:" prop="filePath">
          <el-input v-model="newForm.filePath" size="small" placeholder="请输入文件路径" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="文件类型:" prop="fileType">
          <el-radio-group v-model="newForm.fileType">
            <el-radio label="FTP">FTP</el-radio>
            <el-radio label="SFTP">SFTP</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button type="primary" @click="testConnect" size="small">连接测试</el-button>
        <el-button type="primary" @click="addSubmit" size="small">确 定</el-button>
        <el-button @click="cancelSubmit" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'ftpSetting',
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        name: '',
        tableData: [],
        loading: false,
        dialogFormVisible: false,
        title: '新增接口平台',
        newForm: {
          platformName: '',
          ip: '',
          admin: '',
          adminPass: '',
          filePath: '',
          fileType: 'FTP'
        },
        rules: {},
        tree: []
      }
    },
    methods: {
      cancelSubmit() {
        this.dialogFormVisible = false
        this.newForm = {
          platformName: '',
          ip: '',
          admin: '',
          adminPass: '',
          filePath: '',
          fileType: 'FTP'
        }
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
      },
      addSubmit() {},
      testConnect() {},
      addNewPlatform() {
        this.dialogFormVisible = true
        this.title = '新增接口平台'
      }
    }
  }
</script>
<style lang="scss" scoped>
  .pagination{
    text-align: center;
    margin-top: 20px;
  }
</style>
